<template>
  <div>
    <!-- 头部导航 -->
    <div class="header">
      <!-- <div class="left iconfont icon-wuxuliebiao" @click="$router.push('/userInfo').catch(() => {})"></div> -->
      <van-cell
        @click="showPopup"
        class="left iconfont icon-31liebiao"
      ></van-cell>
      <div class="center">MUSIC-VUE</div>
      <!-- <div class="right iconfont icon-search"></div> -->
      <router-link
        :to="'/recommend/search'"
        class="right iconfont icon-search"
        tag="div"
      ></router-link>
      <van-popup
        v-model="show"
        position="left"
        round
        :style="{ height: '100%', width: '75%' }"
        class="user"
      >
        <div class="head" @click="$router.push('/userInfo').catch(() => {})">
          <div class="head_img">
            <img :src="users.avatarUrl" />
          </div>
          <div class="head_user">
            <p>{{ users.nickname }}</p>
            <span class="iconfont icon-arrowRight-copy-copy-copy"></span>
          </div>
        </div>
        <div class="test">
          <div class="test_box">
            <table>
              <tbody>
                <td>
                  <div>
                    <span class="iconfont icon-duanxin1"></span>我的消息
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-yunbeiguanli"></span>云贝中心
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-dengpao"></span>创作者中心
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
              </tbody>
            </table>
          </div>
        </div>
        <div class="test">
          <div class="test_box">
            <table>
              <thead class="thead">
                <td>音乐服务</td>
              </thead>
              <tbody>
                <td>
                  <div>
                    <span class="iconfont icon-tianmaohuopiaotongxing"></span
                    >云村有票
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-shangcheng"></span>商城</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-youxi"></span>游戏专区</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-cailing"></span>口袋彩铃</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
              </tbody>
            </table>
          </div>
        </div>
        <div class="test">
          <div class="test_box">
            <table>
              <thead class="thead">
                <td>其他</td>
              </thead>
              <tbody>
                <td>
                  <div><span class="iconfont icon-shezhi"></span>设置</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-yueliang"></span>夜间模式
                  </div>
                  <div>
                    <van-switch v-model="checked" size="18px" />
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-miaobiao"></span>定时关闭
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-clothes"></span>个性装扮</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-erji"></span>边听边存</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-liuliangbao"></span
                    >在线听歌免流量
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-jinzhi"></span>音乐黑名单
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-a-1_fangchenmi"></span>青少年模式
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-naozhong"></span>音乐闹钟
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
              </tbody>
            </table>
          </div>
        </div>
        <div class="test">
          <div class="test_box">
            <table>
              <tbody>
                <td>
                  <div><span class="iconfont icon-dingdan"></span>我的订单</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-youhuijuan"></span>优惠卷
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-bangzhu"></span>帮助与反馈
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div>
                    <span class="iconfont icon-fenxiang"></span>分享网易云音乐
                  </div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
                <td>
                  <div><span class="iconfont icon-guanyu_o"></span>关于</div>
                  <div>
                    <span
                      class="iconfont icon-arrowRight-copy-copy-copy box_right"
                    ></span>
                  </div>
                </td>
              </tbody>
            </table>
          </div>
        </div>
        <div class="button" v-if="sign">
          <van-button round type="primary" size="normal" @click="signOut"
            >退出登录</van-button
          >
        </div>
      </van-popup>
    </div>
    <!-- 导航按钮 -->
    <div class="navs">
      <router-link tag="div" to="/recommend" class="item">
        <span>推荐</span>
      </router-link>
      <router-link tag="div" to="/rank" class="item">
        <span>排行榜</span>
      </router-link>
      <router-link tag="div" to="/singer" class="item">
        <span>歌手</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getUserinfo } from "../../api/userinfo";
export default {
  data() {
    return {
      show: false,
      checked: false,
      users: {
        avatarUrl: "",
        nickname: "",
      },
      sign: true,
    };
  },
  created() {
    let userId = localStorage.getItem("uid");
    if (userId) {
      getUserinfo({ uid: userId }).then((item) => {
        // console.log(item);
        this.lv = item.level;
        this.users = item.profile;
      });
    } else {
      this.users = {
        avatarUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F85%2F50%2F5981488af190c_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641535387&t=e071873eda36ad5bfb16ff79200cd7cd",
        nickname: "请登录账号",
      };
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    signOut() {
      let userId = localStorage.getItem("uid");
      this.id = userId;
      if (userId) {
        localStorage.clear();
        Toast("退出成功");
        location.reload();
      }
    },
  },
};
</script>

<style lang="less">
.user {
  color: #000;
  background-color: #f4f4f4 !important;
  .head {
    display: flex;
    .head_img {
      img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        padding: 10px 5px;
      }
    }
    .head_user {
      display: flex;
      align-items: center;
    }
  }
  .test {
    .test_box {
      width: 90%;
      margin: 15px auto;
      background-color: #fff;
      border-radius: 10px;
      table {
        width: 100%;
        font-size: 14px;
        .thead {
          line-height: 25px;
          display: block;
          border-bottom: 1px solid #e7e7e7;
          td {
            font-size: 12px;
            padding-left: 15px;
            color: #979797;
          }
        }
        tbody {
          td {
            display: flex;
            justify-content: space-between;
            padding: 0 5px;
            span {
              vertical-align: middle;
              padding-right: 5px;
            }
            .box_right {
              color: #979797;
            }
          }
        }
      }
    }
  }
  .button {
    margin: 10px 0;
    button {
      width: 80%;
      border-radius: 10px;
      border: 0;
      background-color: #fff;
      color: red;
    }
  }
}
.header {
  background-color: #d44439;
  color: #fff;
  height: 39px;
  line-height: 39px;
  display: flex;
  text-align: center;
  .left {
    &::after {
      border: none;
    }
    color: #fff;
    background-color: transparent;
    flex: 0 0 30px;
    font-size: 16px;
    line-height: 18px;
  }
  .right {
    color: #fff;
    flex: 0 0 40px;
    font-size: 14px;
  }
  .center {
    flex: 1;
  }
}
.navs {
  height: 40px;
  line-height: 40px;
  display: flex;
  background-color: #d44439;
  color: #fff;
  .item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    span {
      display: inline-block;
      height: 21px;
      line-height: 21px;
      border-bottom: 1px solid transparent;
    }
    &.router-link-active span {
      border-color: #fff;
      font-weight: bold;
    }
  }
}
</style>